<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no">
    <meta name="apple-themes-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="format-detection" content="telephone=no">
    <title>好文列表</title>
    <link rel="stylesheet" href="/static/index/css/main.css" type="text/css" media="all">
    <style type="text/css">
        .card {
            background-color: white;
            margin-bottom: 20px;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 2px 2px 10px #ccc;
            height: 90px;
            position: relative;
        }

        .listContent {
            padding: 10px;
        }
        .btnCate{
            margin-right: 15px;
            background-color: #1F9532;
            color: white;
            border-radius: 9px;
            position: absolute;
            top: 26px;
            left: 100px;
            width: 119px;
            text-align: center;
        }
        .btnDis{
            margin-right: 15px;
            background-color: #1E9FFF;
            color: white;
            border-radius: 9px;
            position: absolute;
            top: 26px;
            right: 100px;
            padding-left: 10px;
            padding-right: 10px;
            text-align: center;
            padding-top: 3px;
            padding-bottom: 3px;
            margin-top: -7px;
        }
        .btnHot{
            margin-right: 15px;
            background-color: #FF5722;
            color: white;
            border-radius: 9px;
            position: absolute;
            top: 26px;
            right: 10px;
            padding-left: 10px;
            padding-right: 10px;
            text-align: center;
            padding-top: 3px;
            padding-bottom: 3px;
            margin-top: -7px;
        }
        .topPosition{
            display: block;
            background-color: coral;
            color: white;
            font-size: 20px;
            border-radius: 5px;
            width: 50px;
            text-align: center;
            position: absolute;
            right: 10px;
            top: 10px;
        }
        .search-title {
            position: absolute;
            left: 180px;
        }
    </style>
</head>

<body>
<!--页面加载 开始-->
<div id="preloader">
    <div id="status">
        <p class="center-text"><span>拼命加载中···</span></p>
    </div>
</div>
<!--页面加载 结束-->

<div id="content_div">
    <div class="header">
        <a href="javascript:history.go(-1);" class="fanhui"></a>
    </div>
    <div id="chooseCate"><a href="#" class="search search-title" style="width: 52%">搜索</a></div>
    <span class="btnDis" id="hot">热度</span>
    <span class="btnHot" id="time">时间</span>
    <div class="listContent">
        <ul id="dataList">
<!--            <li>-->
<!--                <a href="%s">-->
<!--                    <div class="card" >-->
<!--                        <p style="color:#000;font-size: 28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width: 500px">%s <span class="topPosition">置顶</span></p>-->
<!--                        <p style="margin-top: 7px">-->
<!--                            <span>%s</span>-->
<!--                            <span style="margin-left: 120px">%s</span>-->
<!--                            <span style="margin-left: 120px">%s次浏览</span>-->
<!--                        </p>-->
<!--                    </div>-->
<!--                </a>-->
<!--            </li>-->
        </ul>
    </div>
    <div style="text-align: center;margin-top: 15px;" id="showMoreDiv">
        <button style=" width: 200px;height: 45px;    border-radius: 12px;" value="1" id="showMoreBtn">点击加载更多</button>
    </div>
    <div style="text-align: center;margin-top: 15px;display: none" id="noMoreDiv">
        <button style=" width: 200px;height: 45px;    border-radius: 12px;">没有更多信息</button>
    </div>
    <div style="text-align: center;margin-top: 15px;display: none" id="loaddingDiv">
        <button style=" width: 200px;height: 45px;    border-radius: 12px;">加载中...</button>
    </div>
</div>



<!--底部-->
<div class="foot_nav">
    <ul>
        <li>
            <a href="/" >
                <img src="/static/index/images/nav1.png"/>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="{:url('index/Institution/institutionList')}">
                <img src="/static/index/images/nav2.png"/>
                <p>培优</p>
            </a>
        </li>

        <li >
            <a href="{:url('index/Article/goodClassList')}">
                <img src="/static/index/images/nav3.png" style="width: 45px;height: 42px;margin-top: -6px;"/>
                <p>好课</p>
            </a>
        </li>
        <li class="active">
            <a href="{:url('index/Article/goodArticleList')}">
                <img src="/static/index/images/nav4-active.png"/>
                <p>好文</p>
            </a>
        </li>
        <li>
            <a href="http://wechat.wx.0579bb.com/app/index.php?i=7&c=entry&do=forum&m=meepo_bbs">
                <img src="/static/index/images/nav5.png"/>
                <p>BBS</p>
            </a>
        </li>
    </ul>
</div>


<!--底部结束-->
<script type="text/javascript" src="/static/index/js/zepto.js"></script>
<script type="text/javascript" src="/static/index/js/carousel-image.js"></script>
<script>
    $('.carousel-image').CarouselImage({
        num: $('.carousel-image .carousel-num'),
        repeat: true
    });
</script>
<script type="text/javascript" src="/static/index/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/index/js/common.js"></script>
<script type="text/javascript">
    getData(1);
    $("#showMoreBtn").click(function(){
        var value=$("#showMoreBtn").val();
        value=parseInt(value);
        value+=1;
        $("#showMoreBtn").val(value);
        showLoading();
        getData(value);
    });
    function getData(page){
        $.ajax({
            url:"{:url('index/Article/goodArticleList')}",
            type:"post",
            data:{
                page:page,
                orderBy:"{$orderBy}",
                art_title:"{$art_title}",
                acc_id:"{$acc_id}"
            },
            dataType:"json",
            success:function(res){
                var html=res.data.html;
                var hasMore=res.data.hasMore;
                $("#dataList").append(html);
                if(hasMore==1){
                    showMore();
                }else{
                    showNoMore();
                }
            }
        })
    }

    function showLoading(){
        $("#showMoreDiv").css("display","none");
        $("#noMoreDiv").css("display","none");
        $("#loaddingDiv").css("display","block");
    }


    function showNoMore(){
        $("#showMoreDiv").css("display","none");
        $("#noMoreDiv").css("display","block");
        $("#loaddingDiv").css("display","none");
    }

    function showMore(){
        $("#showMoreDiv").css("display","block");
        $("#noMoreDiv").css("display","none");
        $("#loaddingDiv").css("display","none");
    }

</script>
<script type="text/javascript">
    $("#chooseCate").click(function(){
        var url="{:url('index/Index/chooseGoodArticleCategory')}";
        window.location.href=url;
    });

    $("#hot").click(function(){
        var url="{:url('index/Article/goodArticleList')}?orderBy=hot&acc_id={$acc_id}&art_title={$art_title}";
        window.location.href=url;
    })
    $("#time").click(function(){
        var url="{:url('index/Article/goodArticleList')}?orderBy=create_time&acc_id={$acc_id}&art_title={$art_title}";
        window.location.href=url;
    })

</script>
</body>
</html>
